<template>
	<view class="box" @click="change">
		<view class="boxbox">
			<view class="pos11">
				<img class="imgbox" :src="src">
				<view class="text3">
					{{classTol}}
				</view>
			</view>
			<view class="classN">
				{{className}}
			</view>
			<view class="text">
				{{distance}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			change(){
				this.$emit('change')
			}
		},
		props: {
			classTol: {
				type: String,
				default: ''
			},
			className:{
				type: String,
				default: '卡通名称'
			},
			src: {
				type: String,
				default: '/static/image/rotation1.jpg'
			},
			distance: {
				type: String,
				default: ''
			}
		}
	}
</script>
<style scoped>
	.box{
	  display: flex;
	  justify-content: space-between;
	}
	.boxbox{
		width: 100%;
	}
	.imgbox{
		width: 100%;
		height: 100px;
	}
	text{
		font-size: 12px;
	}
	.text{
		font-size: 12px;
		color: #B2AFAF;
		margin-bottom: 5px;
	}
	.text3{
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #fff;
		font-size: 12px;
		background-color: #696969 ;
		border-radius: 4rpx;
	}
	.pos11{
		position: relative;
	}
	.classN{
		padding: 10rpx 6rpx;
	}
</style>
